<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打工人の摸鱼计算器</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --text-color: #333;
            --bg-color: #f5f5f5;
            --card-bg: white;
            --accent-color: #1a73e8;
            --money-color: #28a745;
            --primary-color-rgb: 76, 175, 80;
            --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234CAF50' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* 深色主题 */
        [data-theme="dark"] {
            --primary-color: #45a049;
            --text-color: #fff;
            --bg-color: #1a1a1a;
            --card-bg: #2d2d2d;
            --accent-color: #64b5f6;
            --money-color: #4CAF50;
            --primary-color-rgb: 69, 160, 73;
            --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2345a049' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* 粉色主题 */
        [data-theme="pink"] {
            --primary-color: #e91e63;
            --text-color: #333;
            --bg-color: #fce4ec;
            --card-bg: white;
            --accent-color: #c2185b;
            --money-color: #e91e63;
            --primary-color-rgb: 233, 30, 99;
            --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e91e63' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* 科技蓝主题 */
        [data-theme="tech"] {
            --primary-color: #2196F3;
            --text-color: #fff;
            --bg-color: #102027;
            --card-bg: #37474F;
            --accent-color: #64b5f6;
            --money-color: #4FC3F7;
            --primary-color-rgb: 33, 150, 243;
            --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232196F3' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: var(--bg-color);
            background-image: var(--bg-pattern);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: var(--text-color);
            transition: all 0.3s ease;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, 
                        rgba(var(--primary-color-rgb), 0.1) 0%, 
                        rgba(var(--primary-color-rgb), 0) 50%, 
                        rgba(var(--primary-color-rgb), 0.1) 100%);
            z-index: -1;
        }

        .money-symbol {
            position: fixed;
            color: var(--money-color);
            opacity: 0.1;
            font-size: 24px;
            font-weight: bold;
            animation: floatSymbol 15s linear infinite;
            z-index: -1;
        }

        @keyframes floatSymbol {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.1;
            }
            90% {
                opacity: 0.1;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .container {
            background-color: var(--card-bg);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 500px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            backdrop-filter: blur(5px);
        }

        .theme-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 1000;
        }

        .theme-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .theme-btn:hover {
            transform: scale(1.1);
        }

        .theme-btn.light { background-color: #f5f5f5; border: 1px solid #ddd; }
        .theme-btn.dark { background-color: #1a1a1a; }
        .theme-btn.pink { background-color: #e91e63; }
        .theme-btn.tech { background-color: #2196F3; }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .stat-card {
            background-color: rgba(var(--primary-color-rgb), 0.1);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 12px;
            color: var(--text-color);
            opacity: 0.8;
        }

        h1 {
            text-align: center;
            color: var(--accent-color);
            margin-bottom: 30px;
            font-size: 28px;
        }

        .money {
            color: var(--money-color);
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin: 10px 0;
        }

        .input-section {
            margin-bottom: 25px;
        }

        .input-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--accent-color);
        }

        input[type="number"], input[type="time"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        .time-input {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .small-text {
            font-size: 12px;
            opacity: 0.7;
            margin-top: 5px;
        }

        .start-button {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 20px;
        }

        .start-button:hover {
            background-color: var(--primary-color);
        }

        .result {
            text-align: center;
            margin: 25px 0;
            padding: 15px;
            border-radius: 10px;
            background-color: rgba(var(--primary-color-rgb), 0.1);
        }

        .working-time {
            margin-top: 8px;
            font-size: 14px;
        }

        .motivation {
            text-align: center;
            margin-top: 20px;
            font-style: italic;
            opacity: 0.8;
            padding: 10px;
            border-top: 1px solid rgba(var(--primary-color-rgb), 0.2);
        }

        /* 全屏模式样式 */
        .fullscreen-mode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            background-image: var(--bg-pattern);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: background-color 0.5s ease;
            overflow: hidden;
        }

        .fullscreen-mode::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, 
                        rgba(var(--primary-color-rgb), 0.2) 0%, 
                        rgba(var(--primary-color-rgb), 0) 70%);
            z-index: -1;
            animation: pulseGradient 10s ease-in-out infinite;
        }

        @keyframes pulseGradient {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .fullscreen-money {
            font-size: 10vw;
            color: var(--money-color);
            margin-bottom: 3vh;
            text-align: center;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            animation: pulse 2s infinite;
            position: relative;
            z-index: 2;
        }

        .fullscreen-money::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 6px;
            background: linear-gradient(90deg, 
                        transparent, 
                        var(--money-color), 
                        transparent);
            border-radius: 50%;
            opacity: 0.5;
        }

        .floating-coins {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        .coin {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: var(--money-color);
            border-radius: 50%;
            opacity: 0.2;
            animation: floatCoin 15s linear infinite;
        }

        @keyframes floatCoin {
            0% {
                transform: translateY(100vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.2;
            }
            90% {
                opacity: 0.2;
            }
            100% {
                transform: translateY(-10vh) translateX(20vw) rotate(360deg);
                opacity: 0;
            }
        }

        .exit-fullscreen {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 24px;
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            z-index: 10001;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .exit-fullscreen:hover {
            background-color: var(--primary-color);
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }

        @media (max-width: 768px) {
            .fullscreen-money {
                font-size: 15vw;
            }
            
            .fullscreen-time {
                font-size: 6vw;
            }
            
            .fullscreen-stat-value {
                font-size: 5vw;
            }
            
            .fullscreen-stat-label {
                font-size: 3vw;
            }
            
            .fullscreen-motivation {
                font-size: 4vw;
            }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .fullscreen-time {
            font-size: 4vw;
            color: var(--accent-color);
            margin-bottom: 5vh;
            opacity: 0.9;
        }

        .fullscreen-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 80%;
            max-width: 800px;
        }

        .fullscreen-stat {
            text-align: center;
            padding: 20px;
            background-color: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .fullscreen-stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .fullscreen-stat-value {
            font-size: 3vw;
            font-weight: bold;
            color: var(--primary-color);
        }

        .fullscreen-stat-label {
            font-size: 1.5vw;
            margin-top: 10px;
            color: var(--text-color);
        }

        .fullscreen-motivation {
            font-size: 2vw;
            margin-top: 5vh;
            color: var(--text-color);
            font-style: italic;
            padding: 10px 20px;
            border-radius: 50px;
            background-color: rgba(var(--primary-color-rgb), 0.1);
            animation: fadeIn 1s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 增加分钱提示动画 */
        .cent-increment {
            position: absolute;
            font-size: 16px;
            color: var(--money-color);
            font-weight: bold;
            opacity: 0;
            z-index: 3;
            pointer-events: none;
            animation: centFloat 1s ease-out forwards;
        }

        @keyframes centFloat {
            0% {
                transform: translateY(0);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            100% {
                transform: translateY(-50px);
                opacity: 0;
            }
        }

        /* 金额变化动画 */
        .money-change {
            animation: moneyPulse 0.5s ease;
        }

        @keyframes moneyPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="theme-switcher">
        <button class="theme-btn light" onclick="setTheme('light')" title="明亮主题"></button>
        <button class="theme-btn dark" onclick="setTheme('dark')" title="深色主题"></button>
        <button class="theme-btn pink" onclick="setTheme('pink')" title="粉色主题"></button>
        <button class="theme-btn tech" onclick="setTheme('tech')" title="科技蓝主题"></button>
    </div>
    <!-- 背景漂浮元素 -->
    <div id="backgroundSymbols"></div>
    
    <div class="container">
        <h1>打工人の摸鱼计算器</h1>
        <div class="input-section">
            <div class="input-group">
                <label for="salary">月薪（元）</label>
                <input type="number" id="salary" placeholder="请输入你的月薪">
            </div>
            <div class="input-group">
                <label>工作时间</label>
                <div class="time-input">
                    <input type="time" id="startTime" value="09:00">
                    <span>至</span>
                    <input type="time" id="endTime" value="18:00">
                </div>
                <div class="small-text">默认朝九晚六</div>
            </div>
            <div class="input-group">
                <label for="restDays">每月休息天数</label>
                <input type="number" id="restDays" placeholder="休息天数" value="8">
                <div class="small-text">包含周末和节假日</div>
            </div>
            <button class="start-button" onclick="startFullscreen()">开始摸鱼</button>
        </div>
        <div class="result">
            <div>今天已经赚了：</div>
            <div class="money" id="earned">¥0.00</div>
            <div class="working-time" id="workingTime">工作了 0 小时 0 分钟 0 秒</div>
        </div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value" id="hourlyRate">¥0.00</div>
                <div class="stat-label">时薪</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="monthProgress">0%</div>
                <div class="stat-label">本月进度</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="todayProgress">0%</div>
                <div class="stat-label">今日进度</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="monthEarned">¥0.00</div>
                <div class="stat-label">本月已赚</div>
            </div>
        </div>
        <div class="motivation" id="motivation">打工人，打工魂，打工都是人上人！</div>
    </div>

    <!-- 全屏模式的容器 -->
    <div id="fullscreenMode" class="fullscreen-mode" style="display: none;">
        <button class="exit-fullscreen" id="exitFullscreenBtn">退出全屏</button>
        <!-- 漂浮的金币元素 -->
        <div class="floating-coins" id="floatingCoins"></div>
        
        <div class="fullscreen-money" id="fullscreenEarned">¥0.00</div>
        <div class="fullscreen-time" id="fullscreenTime">工作了 0 小时 0 分钟 0 秒</div>
        <div class="fullscreen-stats">
            <div class="fullscreen-stat">
                <div class="fullscreen-stat-value" id="fullscreenTodayProgress">0%</div>
                <div class="fullscreen-stat-label">今日进度</div>
            </div>
            <div class="fullscreen-stat">
                <div class="fullscreen-stat-value" id="fullscreenMonthProgress">0%</div>
                <div class="fullscreen-stat-label">本月进度</div>
            </div>
        </div>
        <div class="fullscreen-motivation" id="fullscreenMotivation">打工人，打工魂，打工都是人上人！</div>
    </div>

    <script>
        // 主题切换功能
        function setTheme(theme) {
            document.body.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
        }

        // 加载保存的主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        setTheme(savedTheme);

        // 获取时间输入
        function getTimeFromInput(inputId) {
            const timeStr = document.getElementById(inputId).value;
            const [hours, minutes] = timeStr.split(':').map(Number);
            const now = new Date();
            now.setHours(hours, minutes, 0);
            return now;
        }

        // 保存用户输入到本地存储
        function saveUserInput() {
            const salary = document.getElementById('salary').value;
            const startTime = document.getElementById('startTime').value;
            const endTime = document.getElementById('endTime').value;
            const restDays = document.getElementById('restDays').value;
            
            localStorage.setItem('userSalary', salary);
            localStorage.setItem('userStartTime', startTime);
            localStorage.setItem('userEndTime', endTime);
            localStorage.setItem('userRestDays', restDays);
        }
        
        // 从本地存储加载用户输入
        function loadUserInput() {
            const salary = localStorage.getItem('userSalary');
            const startTime = localStorage.getItem('userStartTime');
            const endTime = localStorage.getItem('userEndTime');
            const restDays = localStorage.getItem('userRestDays');
            
            if (salary) document.getElementById('salary').value = salary;
            if (startTime) document.getElementById('startTime').value = startTime;
            if (endTime) document.getElementById('endTime').value = endTime;
            if (restDays) document.getElementById('restDays').value = restDays;
        }

        // 全屏模式相关变量
        let isFullscreen = false;
        let fullscreenInterval;
        let motivationInterval;
        let lastCents = 0; // 用于跟踪分钱的变化

        // 创建背景漂浮元素
        function createBackgroundSymbols() {
            const symbols = ['¥', '💰', '💼', '🧠', '☕'];
            const container = document.getElementById('backgroundSymbols');
            const symbolCount = 20;
            
            for (let i = 0; i < symbolCount; i++) {
                const symbolElem = document.createElement('div');
                symbolElem.className = 'money-symbol';
                symbolElem.textContent = symbols[Math.floor(Math.random() * symbols.length)];
                symbolElem.style.left = `${Math.random() * 100}%`;
                symbolElem.style.top = `${Math.random() * 100}%`;
                symbolElem.style.animationDuration = `${15 + Math.random() * 20}s`;
                symbolElem.style.animationDelay = `${Math.random() * 5}s`;
                container.appendChild(symbolElem);
            }
        }
        
        // 创建全屏漂浮金币
        function createFloatingCoins() {
            const container = document.getElementById('floatingCoins');
            container.innerHTML = ''; // 清空容器
            const coinCount = 15;
            
            for (let i = 0; i < coinCount; i++) {
                const coin = document.createElement('div');
                coin.className = 'coin';
                coin.style.left = `${Math.random() * 100}%`;
                coin.style.animationDuration = `${10 + Math.random() * 15}s`;
                coin.style.animationDelay = `${Math.random() * 5}s`;
                coin.style.width = `${10 + Math.random() * 15}px`;
                coin.style.height = coin.style.width;
                container.appendChild(coin);
            }
        }

        // 开始全屏模式
        function startFullscreen() {
            // 检查是否输入了月薪
            const salary = parseFloat(document.getElementById('salary').value);
            if (!salary || isNaN(salary)) {
                alert('请先输入你的月薪！');
                return;
            }
            
            // 保存用户输入
            saveUserInput();

            isFullscreen = true;
            
            // 重置分钱计数器
            const earnedText = document.getElementById('earned').textContent;
            const currentEarned = parseFloat(earnedText.replace('¥', ''));
            lastCents = Math.floor(currentEarned * 1000);
            
            // 创建漂浮金币
            createFloatingCoins();
            
            // 添加动画效果
            const fullscreenMode = document.getElementById('fullscreenMode');
            fullscreenMode.style.opacity = '0';
            fullscreenMode.style.display = 'flex';
            
            // 使用延时创建淡入效果
            setTimeout(() => {
                fullscreenMode.style.opacity = '1';
                fullscreenMode.style.transition = 'opacity 0.5s ease';
            }, 10);
            
            document.body.style.overflow = 'hidden'; // 防止滚动

            // 更新全屏数据
            updateFullscreenData();

            // 设置全屏更新间隔
            fullscreenInterval = setInterval(updateFullscreenData, 1000);

            // 随机更新励志语录
            updateMotivation(); // 立即更新一次
            motivationInterval = setInterval(updateMotivation, 10000);
        }

        // 退出全屏模式
        function exitFullscreen() {
            console.log('退出全屏模式');
            isFullscreen = false;
            
            // 添加淡出动画
            const fullscreenMode = document.getElementById('fullscreenMode');
            fullscreenMode.style.opacity = '0';
            fullscreenMode.style.transition = 'opacity 0.5s ease';
            
            // 等待动画完成后隐藏
            setTimeout(() => {
                fullscreenMode.style.display = 'none';
                document.body.style.overflow = 'auto';
            }, 500);
            
            // 移除所有分钱效果元素
            document.querySelectorAll('.cent-increment').forEach(elem => {
                if (document.body.contains(elem)) {
                    document.body.removeChild(elem);
                }
            });
            
            // 清除定时器
            clearInterval(fullscreenInterval);
            clearInterval(motivationInterval);
        }

        // 更新全屏数据
        function updateFullscreenData() {
            calculateEarnings();
            
            // 复制普通视图的数据到全屏视图
            const earnedText = document.getElementById('earned').textContent;
            const fullscreenEarned = document.getElementById('fullscreenEarned');

            // 检查分钱是否变化
            const currentEarned = parseFloat(earnedText.replace('¥', ''));
            const currentMillis = Math.floor(currentEarned * 1000);
            
            // 设置文本内容
            fullscreenEarned.textContent = earnedText;
            
            // 如果分钱变化了并且在全屏模式
            if (isFullscreen && currentMillis > lastCents) {
                // 计算增加了多少毫厘
                const millisIncreased = currentMillis - lastCents;
                
                // 如果增加了至少1毫厘
                if (millisIncreased > 0) {
                    // 添加分钱增加的视觉效果
                    createCentEffect(millisIncreased);
                    
                    // 添加金额变化动画
                    fullscreenEarned.classList.add('money-change');
                    setTimeout(() => {
                        fullscreenEarned.classList.remove('money-change');
                    }, 500);
                }
                
                // 更新上次的值
                lastCents = currentMillis;
            }
            
            document.getElementById('fullscreenTime').textContent = document.getElementById('workingTime').textContent;
            document.getElementById('fullscreenTodayProgress').textContent = document.getElementById('todayProgress').textContent;
            document.getElementById('fullscreenMonthProgress').textContent = document.getElementById('monthProgress').textContent;
            document.getElementById('fullscreenMotivation').textContent = document.getElementById('motivation').textContent;
        }

        // 创建分钱增加效果
        function createCentEffect(millisIncreased) {
            const fullscreenEarned = document.getElementById('fullscreenEarned');
            const rect = fullscreenEarned.getBoundingClientRect();
            
            // 在金额周围随机位置创建分钱提示
            for (let i = 0; i < Math.min(millisIncreased, 5); i++) {
                const centElem = document.createElement('div');
                centElem.className = 'cent-increment';
                
                // 显示增加的金额 - 精确到毫厘
                const increase = (0.001).toFixed(3);
                centElem.textContent = `+${increase}`;
                
                // 随机位置，但在金额周围
                const randomX = rect.left + rect.width/2 + (-30 + Math.random() * 60);
                const randomY = rect.bottom + 10 + Math.random() * 10;
                
                centElem.style.left = `${randomX}px`;
                centElem.style.top = `${randomY}px`;
                
                document.body.appendChild(centElem);
                
                // 动画结束后移除元素
                setTimeout(() => {
                    if (document.body.contains(centElem)) {
                        document.body.removeChild(centElem);
                    }
                }, 1000);
            }
            
            // 如果增加了很多分，创建特殊效果
            if (millisIncreased >= 10) {
                const bigCentElem = document.createElement('div');
                bigCentElem.className = 'cent-increment';
                
                // 显示总增加金额 - 精确到毫厘
                bigCentElem.textContent = `+${(millisIncreased * 0.001).toFixed(3)}`;
                bigCentElem.style.fontSize = '24px';
                bigCentElem.style.fontWeight = 'bold';
                bigCentElem.style.color = 'gold';
                
                const centerX = rect.left + rect.width/2;
                const centerY = rect.top - 20;
                
                bigCentElem.style.left = `${centerX}px`;
                bigCentElem.style.top = `${centerY}px`;
                
                document.body.appendChild(bigCentElem);
                
                setTimeout(() => {
                    if (document.body.contains(bigCentElem)) {
                        document.body.removeChild(bigCentElem);
                    }
                }, 1000);
            }
        }

        // 更新励志语录
        function updateMotivation() {
            const motivations = [
                "打工人，打工魂，打工都是人上人！",
                "你今天摸鱼了吗？",
                "躺平是不可能躺平的，这辈子都不可能躺平的",
                "摸鱼才是赚钱的最高境界",
                "打工人，打工魂，摸鱼才是人生赢家",
                "工资不是很多，但是打工很快乐",
                "摸鱼时间最快乐",
                "上班只是一种生活方式",
                "向钱看，向厚赚",
                "工资只是数字，快乐才是真的",
                "干饭人，干饭魂",
                "今天工作不疯狂，明天工作让你忙",
                "有钱的时候，别人都说你好话；没钱的时候，说你好话的都是好人",
                "打工赚钱，就是为了不上班",
                "上班是为了下班，工作是为了周末",
                "工资就像海水，看得见，喝不着"
            ];
            
            const randomMotivation = motivations[Math.floor(Math.random() * motivations.length)];
            
            // 无论是否全屏都更新普通视图
            document.getElementById('motivation').textContent = randomMotivation;
            
            // 如果是全屏模式，更新全屏视图
            if (isFullscreen) {
                document.getElementById('fullscreenMotivation').textContent = randomMotivation;
            }
        }

        function calculateEarnings() {
            const salary = parseFloat(document.getElementById('salary').value) || 0;
            const restDays = parseFloat(document.getElementById('restDays').value) || 8;
            const workdays = 30 - restDays;
            
            const startTime = getTimeFromInput('startTime');
            const endTime = getTimeFromInput('endTime');
            
            // 计算工作时长（小时）
            const workHours = (endTime - startTime) / (1000 * 3600);
            const totalSeconds = workHours * 3600;
            
            const now = new Date();
            const currentTime = new Date();
            currentTime.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
            
            const todayStart = getTimeFromInput('startTime');
            
            let secondsWorked = (currentTime - todayStart) / 1000;
            
            if (currentTime < todayStart) {
                secondsWorked = 0;
            } else if (currentTime > endTime) {
                secondsWorked = workHours * 3600;
            }
            
            const dailySalary = salary / workdays;
            const perSecond = dailySalary / totalSeconds;
            const earned = perSecond * secondsWorked;
            
            // 更新基本显示
            document.getElementById('earned').textContent = `¥${earned.toFixed(3)}`;
            
            const hours = Math.floor(secondsWorked / 3600);
            const minutes = Math.floor((secondsWorked % 3600) / 60);
            const seconds = Math.floor(secondsWorked % 60);
            
            document.getElementById('workingTime').textContent = 
                `工作了 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;

            // 更新统计数据
            // 1. 时薪
            const hourlyRate = (salary / workdays) / workHours;
            document.getElementById('hourlyRate').textContent = `¥${hourlyRate.toFixed(3)}`;

            // 2. 本月进度
            const currentDay = new Date().getDate();
            const monthProgress = (currentDay / 30 * 100).toFixed(1);
            document.getElementById('monthProgress').textContent = `${monthProgress}%`;

            // 3. 今日进度
            const dayProgress = (secondsWorked / (workHours * 3600) * 100).toFixed(1);
            document.getElementById('todayProgress').textContent = 
                `${Math.min(100, Math.max(0, dayProgress))}%`;

            // 4. 本月已赚
            const monthEarned = (salary / 30 * currentDay).toFixed(3);
            document.getElementById('monthEarned').textContent = `¥${monthEarned}`;
            
            // 普通视图随机励志语录(概率较低)
            if (!isFullscreen && Math.random() < 0.01) {
                updateMotivation();
            }
        }

        // 每秒更新一次
        setInterval(calculateEarnings, 1000);

        // 监听所有输入变化，并保存
        const inputElements = ['salary', 'restDays', 'startTime', 'endTime'];
        inputElements.forEach(id => {
            document.getElementById(id).addEventListener('change', function() {
                calculateEarnings();
                saveUserInput();
            });
            
            if (id === 'salary') {
                document.getElementById(id).addEventListener('input', calculateEarnings);
            }
        });
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 创建背景元素
            createBackgroundSymbols();
            
            // 加载保存的用户输入
            loadUserInput();
            
            // 计算初始数据
            calculateEarnings();
            
            // 添加双重事件监听确保退出按钮工作
            document.body.addEventListener('click', function(e) {
                if (e.target && e.target.id === 'exitFullscreenBtn') {
                    exitFullscreen();
                }
            });
            
            const exitBtn = document.getElementById('exitFullscreenBtn');
            if (exitBtn) {
                exitBtn.addEventListener('click', function(e) {
                    e.stopPropagation(); // 停止事件冒泡
                    exitFullscreen();
                });
            }
        });

        // 支持按ESC键退出全屏
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && isFullscreen) {
                exitFullscreen();
            }
        });
    </script>
</body>
</html> 